import '@ant-design/compatible/assets/index.css';
import { Badge, Card, message, Table, Form, Row, Col, Input, Button, Select, DatePicker } from 'antd';
import { connect } from 'dva';
import { FormInstance } from 'antd/lib/form';
import moment from 'moment';
import React, { PureComponent } from 'react';
import Ellipsis from '../../../components/Ellipsis';
import PateoTable from '@/components/common/PateoTable';
import PateoAuthButtons from '@/components/common/PateoAuthButtons';
import { transferOption } from '@/support/utils';
import tableStyles from '@/components/common/PateoTable/TableList.less';
import styles from './index.less';
import TaskModal from './taskCenter';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

const mapStateToProps = (state:any) => ({
    batteryMonitoring: state.batteryMonitoring,
    loading: state.loading.models["batteryMonitoring"],
  }
);
class BatteryMonitoring extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();
  constructor(props: any) {
    super(props);
    this.state = {
      isExtend: this.props.isExtend,
      brandsList: [
        { value: '0', label: '品牌1' },
        { value: '1', label: '品牌2' },
      ],
      seriesList: [
        { value: '0', label: '车系1' },
        { value: '1', label: '车系2' },
      ],
      vehicleTypeList: [
        { value: '0', label: '车型1' },
        { value: '1', label: '车型2' },
        { value: '2', label: '车型3' },
      ],

      taskCenterVisible: false,
    }
  }

  componentDidMount() {
    const { dispatch } = this.props;

    const tempParam = {
      page: 1,
      size: 10
    }
    dispatch({
      type: 'batteryMonitoring/postFetchPage',
      payload: { url: '/newFeedback/findPageList', ...tempParam },
    });
  }

  //  查询
  onFinish = (fieldsValue: any) => {
    console.log(123, fieldsValue)
    console.log(this.props)
  }

  //  重置
  handleFormReset = () => {
    this.formRef.current.resetFields();
    this.formRef.current.submit();
  }

  //  详情
  handleViewDetail = (record: any) => {
    console.log('详情---', record)
  }

  //  导出车辆
  handleVehicle = () => {
    console.log('导出车辆---')
  }

  //  任务中心
  handleTaskCenterModalShow = () => {
    console.log('任务中心---')
    this.setState({
      taskCenterVisible: true
    })
  }

  closeTaskCenterModal = () => {
    this.setState({
      taskCenterVisible: false,
    });
  }

  //  分页查询
  handleTableChange = () => {
    console.log(123)
  }

  render() {
    const { formValues, brandsList, seriesList, vehicleTypeList, taskCenterVisible } = this.state
    // const { batteryMonitoring: { pageData: { list, pagination }, }, loading, dispatch, location: { pathname = '/' } } = this.props;
    // console.log(list, pagination)
    
    let pathname = '/connectPlat/batteryMonitoring'
    const loading = false
    const list = [
      { 
        id: 1,
        vin: 'LTVEZ963230759738',
        brand: '东风风神',
        series: 'M57',
        type: '青春版',
        manufactureDate: '2023-04-16 13:11:30',
        reportDate: '2023-07-16 20:07:15',
        address: '湖北省武汉市经济技术开发区硃山湖大道63号',
      },
      { 
        id: 2,
        vin: 'LTVEZ963230759759',
        brand: '东风风神',
        series: 'M57',
        type: '至臻版',
        manufactureDate: '2023-03-16 09:51:30',
        reportDate: '2023-07-17 18:37:11',
        address: '湖北省武汉市经济技术开发区硃山湖大道63号',
      }
    ]

    const columns = [
      {
        title: 'VIN',
        dataIndex: 'vin',
      },
      {
        title: '品牌',
        dataIndex: 'brand',
      },
      {
        title: '车系',
        dataIndex: 'series',
      },
      {
        title: '车型',
        dataIndex: 'type',
      },
      {
        title: '车辆生产日期',
        dataIndex: 'manufactureDate',
      },
      {
        title: '车辆位置',
        dataIndex: 'address',
        render: (text: any) => {
          return (
            <Ellipsis length={30} tooltip>
              {text}
            </Ellipsis>
          );
        },
      },
      {
        title: '操作',
        dataIndex: 'opt',
        render: (text: any, record: any) => {
          const btns = [
            {
              title: '详情',
              key: 'showDetail',
              auth: 'batteryMonitoring_detail', //  batteryMonitoring_detail
              // disabled: false, 
              onConfirm: () => this.handleViewDetail(record),
            }
          ]
          return <PateoAuthButtons btns={btns} max={3} pathname={pathname} />;
        },
      }
    ]


    const pagination = { current: 1, pageSize: 10, total: 2 }
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
      showTotal: () => (
        <span>共&nbsp;{pagination === undefined ? 0 : pagination.total}&nbsp;条</span>
      ),
    };

    return (
      <div>
        <Card bordered={false}>
          <div className={styles.tableListForm}>
            <Form ref={this.formRef} onFinish={this.onFinish}>
              <Row gutter={24} className={styles.my_searchRow}>
                <Col span={8}>
                  <FormItem name={'vin'} label={'VIN'}>
                    <Input placeholder={'请输入'} autoComplete="off" allowClear />
                  </FormItem>
                </Col>
                <Col span={8}>
                  <FormItem name={'brand'} label={'品牌'}>
                    <Select
                      placeholder="请选择"
                      allowClear
                      getPopupContainer={triggerNode => triggerNode.parentNode}
                    >
                      {transferOption(brandsList, ['value', 'label'])}
                    </Select>
                    {/* <Input placeholder={'请输入'} autoComplete="off" allowClear /> */}
                  </FormItem>
                </Col>
                <Col span={8}>
                  <FormItem name={'series'} label={'车系'}>
                    <Select
                      placeholder="请选择"
                      allowClear
                      getPopupContainer={triggerNode => triggerNode.parentNode}
                    >
                      {transferOption(seriesList, ['value', 'label'])}
                    </Select>
                  </FormItem>
                </Col>
                <Col span={8}>
                  <FormItem name={'vehicleTypeList'} label={'车型'}>
                    <Select
                      placeholder="请选择"
                      allowClear
                      getPopupContainer={triggerNode => triggerNode.parentNode}
                    >
                      {transferOption(vehicleTypeList, ['value', 'label'])}
                    </Select>
                  </FormItem>
                </Col>
                <Col span={8}>
                  <FormItem name={'dateRange1'} label={'车辆生产日期'}>
                    <RangePicker
                      allowClear
                      placeholder={['开始日期', '结束日期']}
                      showTime={false}
                      style={{ width: '100%' }}
                      format={'YYYY-MM-DD'}
                      // defaultValue={initialValue}
                      getCalendarContainer={trigger => trigger.parentNode}
                    ></RangePicker>
                  </FormItem>
                </Col>
                <Col span={8}>
                  <FormItem name={'dateRange2'} label={'数据上报时间'}>
                    <RangePicker
                      allowClear
                      placeholder={['开始时间', '结束时间']}
                      showTime={true}
                      style={{ width: '100%' }}
                      format={'YYYY-MM-DD HH:mm:ss'}
                      // defaultValue={initialValue}
                      getCalendarContainer={trigger => trigger.parentNode}
                    ></RangePicker>
                  </FormItem>
                </Col>
                <Col span={8}>
                  <FormItem label={'电池单体电压差'} style={{ marginBottom: 0 }}>
                    <Form.Item
                      name="voltage1"
                      style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}
                    >
                      <Input placeholder="" />
                    </Form.Item>
                    <span style={{ display: 'inline-block', height: '32px', width: '20px', marginTop: '4px', lineHeight: '32px', textAlign: 'center' }}>-</span>
                    <Form.Item
                      name="voltage2"
                      style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}
                    >
                      <Input placeholder="" />
                    </Form.Item>
                  </FormItem>
                </Col>
                <Col span={8}>
                  <FormItem label={'电池单体电压最高值'} style={{ marginBottom: 0 }}>
                    <Form.Item
                      name="voltageMax1"
                      style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}
                    >
                      <Input placeholder="" />
                    </Form.Item>
                    <span style={{ display: 'inline-block', height: '32px', width: '20px', marginTop: '4px', lineHeight: '32px', textAlign: 'center' }}>-</span>
                    <Form.Item
                      name="voltageMax2"
                      style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}
                    >
                      <Input placeholder="" />
                    </Form.Item>
                  </FormItem>
                </Col>
                <Col span={8}>
                  <FormItem label={'电池单体电压最低值'} style={{ marginBottom: 0 }}>
                    <Form.Item
                      name="voltageMin1"
                      style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}
                    >
                      <Input placeholder="" />
                    </Form.Item>
                    <span style={{ display: 'inline-block', height: '32px', width: '20px', marginTop: '4px', lineHeight: '32px', textAlign: 'center' }}>-</span>
                    <Form.Item
                      name="voltageMin2"
                      style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}
                    >
                      <Input placeholder="" />
                    </Form.Item>
                  </FormItem>
                </Col>

                <Col span={8} offset={16}>
                  <span style={{ float: 'right' }}>
                    <Button type="primary" size={'small'} htmlType="submit">
                      查询
                    </Button>
                    <Button
                      size={'small'}
                      style={{ marginLeft: 8 }}
                      onClick={this.handleFormReset}
                    >
                      重置
                    </Button>
                  </span>
                </Col>
              </Row>
            </Form>
          </div>
        </Card>
        <Card className={tableStyles.standardTable}>
          {/* <PateoTable
            extraHandle={true}
            tableProps={tableProps}
            fetchParams={{ type: 'consumerLog/postFetchPage', url: '/newFeedback/findPageList', extraArgs: {} }}
            formValues={formValues}
            currentName="page"
            pageSizeName="size"
          /> */}
          <div>
            <Row>
              <Col span={12}>
                <Button
                  style={{ marginBottom: 8, marginRight: 8 }}
                  type={"primary"}
                  onClick={ () => this.handleVehicle() }
                >
                  导出车辆
                </Button>
                <Button
                  style={{ marginBottom: 8, marginRight: 8 }}
                  type={"primary"}
                  onClick={() => { this.handleTaskCenterModalShow() }}
                >
                  任务中心
                </Button>
              </Col>
            </Row>
          </div>
          <Table
            size={'small'}
            rowKey={record => record.id}
            dataSource={list}
            loading={loading}
            columns={columns}
            pagination={paginationProps}
            onChange={this.handleTableChange}
            scroll={{ x: '100%' }}
          />
        </Card>
        <TaskModal 
          onRef={(val: any) => (this.taskCenterModal = val)}
          modalVisible={taskCenterVisible}
          closeModal={this.closeTaskCenterModal}
        />
      </div>
    )
  }
}

export default connect(mapStateToProps)(BatteryMonitoring);
